<template>
    <example :template-code="templateString">
        <template #describe>
            <t :id="`${$t('配置 requestConfig 自动获取选项')}`">{{ $t('配置 requestConfig 自动获取选项') }}</t>
            <li>
                通过<span class="s-code">requestConfig</span>接口请求配置对象，可实现自动请求并渲染下拉选项
            </li>
            <li>
                选项被选中时，组件内默认从选项数据内取<span class="s-code">"value"</span>字段对应的值作为绑定值，
                取<span class="s-code">"label"</span>字段对应的值作为展示；如果数据内不存在这两个字段名，
                则需要使用<span class="s-code">optionProps</span>属性来指定
            </li>
            <li>
                设置<span class="s-code">splitButton</span>为<span class="s-code">true</span>即可更改为按钮样式
            </li>
        </template>
        <div style="margin-bottom: 10px;">
            <el-button @click="changeRequestConfig">切换数据源</el-button>
        </div>
        <div style="width: 300px;color:#666;">
            <sib-item v-model="modelValue" :props="props"></sib-item>
        </div>
        <div style="color:#666;">
            <p>v-model 绑定值：{{ modelValue }}</p>
        </div>
    </example>
</template>

<script>
import { ref, reactive } from 'vue';

export default {
    setup() {
        const modelValue = ref(null);
        const props = reactive({
            type: 'dropselect',
            splitButton: true,
            buttonType: 'danger',
            optionProps: {
                value: 'id',
                label: 'name',
                // 自定义下拉选项dom; opt: 下拉选项
                customHTML: (opt) => `<span style="color: ${['red', 'green', 'skyblue'][opt.status]};">${opt.name}</span>`,
            },
            options: [],
            requestConfig: {
                url: '/api/list-data.json',
                method: 'get',
                params: {},
            },
        });

        return {
            props,
            modelValue,
            changeRequestConfig() {
                props.requestConfig.url = props.requestConfig.url === '/api/list-data.json' ? '/api/tree-data.json' : '/api/list-data.json';
                modelValue.value = '';
            },
            templateString: `<template>
    <el-button @click="changeRequestConfig">切换数据源</el-button>
    <sib-item v-model="modelValue" :props="props"></sib-item>
    <p>v-model 绑定值：{{ modelValue }}</p>
</template>

<script>
import { ref, reactive } from 'vue';

export default {
    setup() {
        const modelValue = ref(null);
        const props = reactive({
            type: 'dropselect',
            splitButton: true,
            buttonType: 'danger',
            optionProps: {
                value: 'id',
                label: 'name',
                // 自定义下拉选项dom; opt: 下拉选项
                customHTML: (opt) => \`<span style="color: \${['red', 'green', 'skyblue'][opt.status]};">\${opt.name}</span>\`,
            },
            options: [],
            requestConfig: {
                url: '/api/list-data.json',
                method: 'get',
                params: {},
            },
        });

        return {
            props,
            modelValue,
            changeRequestConfig() {
                props.requestConfig.url = props.requestConfig.url === '/api/list-data.json' ? '/api/tree-data.json' : '/api/list-data.json';
                modelValue.value = '';
            },
        };
    },
};
<\/script>`,
        };
    },
};
</script>
